<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Page</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <!-- 引入用户页面的 CSS 文件 -->
    <link href="${pageContext.request.contextPath}/static/css/userPage.css" rel="stylesheet">
    <!-- 引入用户页面的 JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/static/js/userPage.js"></script>
    <script>
        window.onload = function() {
            <c:if test="${rechargeSuccess}">
                alert('充值成功');
            </c:if>
            <c:if test="${not empty operationResult}">
                alert('${operationResult}');
            </c:if>
        };

        // 检查余额是否足够
        function checkBalance(requiredAmount) {
            const balance = parseFloat('${user.balance}');
            return balance >= requiredAmount;
        }

        // 检查短信是否足够
        function checkSms(requiredSms) {
            const sms = parseInt('${user.sms}');
            return sms >= requiredSms;
        }

        // 检查流量是否足够
        function checkTraffic(requiredTraffic) {
            const traffic = parseFloat('${user.traffic}');
            return traffic >= requiredTraffic;
        }

        // 执行功能操作
        function performFunction(action, url, requiredSms = 0, requiredAmount = 0, requiredTraffic = 0) {
            if (requiredSms > 0 && !checkSms(requiredSms)) {
                if (confirm(`短信不足，是否花费 ${requiredSms} 元购买 ${requiredSms} 条短信？`)) {
                    window.location.href = '${pageContext.request.contextPath}/buySms?count=' + requiredSms;
                }
                return;
            }

            if (requiredAmount > 0 && !checkBalance(requiredAmount)) {
                if (confirm(`余额不足，是否前往充值页面？`)) {
                    window.location.href = '${pageContext.request.contextPath}/toRecharge';
                }
                return;
            }

            if (requiredTraffic > 0 && !checkTraffic(requiredTraffic)) {
                const requiredMoney = requiredTraffic * 5;
                if (confirm(`流量不足，是否花费 ${requiredMoney} 元购买 ${requiredTraffic} GB 流量？`)) {
                    window.location.href = '${pageContext.request.contextPath}/buyTraffic?amount=' + requiredTraffic;
                }
                return;
            }

            // 余额足够，执行操作
            window.location.href = url;
        }
    </script>
</head>
<body>
    <!-- 用户容器，应用 user-container 样式 -->
    <div class="user-container">
        <div class="p-6">
            <!-- 页面标题 -->
            <h2 class="text-2xl font-bold text-gray-800 text-center mb-6">用户信息</h2>

            <!-- 用户信息表格 -->
            <div class="overflow-x-auto">
                <table class="custom-table">
                    <thead>
                        <tr class="bg-gray-200">
                            <th class="px-4 py-3 border border-gray-300">用户名</th>
                            <th class="px-4 py-3 border border-gray-300">账号</th>
                            <th class="px-4 py-3 border border-gray-300">密码</th>
                            <th class="px-4 py-3 border border-gray-300">短信</th>
                            <th class="px-4 py-3 border border-gray-300">流量</th>
                            <th class="px-4 py-3 border border-gray-300">通话</th>
                            <th class="px-4 py-3 border border-gray-300">余额</th>
                            <th class="px-4 py-3 border border-gray-300 package-cell">套餐</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="px-4 py-3 border border-gray-300">${user.username}</td>
                            <td class="px-4 py-3 border border-gray-300">${user.phone}</td>
                            <td class="px-4 py-3 border border-gray-300">${user.password}</td>
                            <td class="px-4 py-3 border border-gray-300">${user.sms}</td>
                            <td class="px-4 py-3 border border-gray-300">${user.traffic} GB</td>
                            <td class="px-4 py-3 border border-gray-300">${user.bill}分钟</td>
                            <td class="px-4 py-3 border border-gray-300">¥${user.balance}</td>
                            <td class="px-4 py-3 border border-gray-300 package-cell">
                                <c:choose>
                                    <c:when test="${user.userpackage == 1}">
                                        套餐1: 20条短信, 1GB流量, 200分钟话费, 花费50元
                                    </c:when>
                                    <c:when test="${user.userpackage == 2}">
                                        套餐2: 0条短信, 10GB流量, 0分钟话费, 花费60元
                                    </c:when>
                                    <c:when test="${user.userpackage == 3}">
                                        套餐3: 50条短信, 5GB流量, 500分钟话费, 花费150元
                                    </c:when>
                                    <c:otherwise>
                                        N/A
                                    </c:otherwise>
                                </c:choose>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <!-- 用户充值按钮 -->
                <a href="${pageContext.request.contextPath}/toRecharge" class="action-btn user-recharge">
                    <i class="fa-solid fa-wallet mr-2"></i>用户充值
                </a>
                <!-- 更改套餐按钮 -->
                <a href="#" onclick="showChangePackageModal()" class="action-btn change-package">
                    <i class="fa-solid fa-box-archive mr-2"></i>更改套餐
                </a>
                <!-- 账单查询按钮 -->
                <a href="${pageContext.request.contextPath}/toBills" class="action-btn bill-query">
                    <i class="fa-solid fa-file-invoice mr-2"></i>账单查询
                </a>
                <!-- 操作菜单 -->
                <div class="menu">
                    <a href="#" class="action-btn operation-menu" onclick="toggleSubMenu(event)">
                        <i class="fa-solid fa-bars"></i>
                        <span>操作菜单</span>
                    </a>
                    <!-- 二级菜单 -->
                    <div class="sub-menu" id="subMenu">
                        <!-- 充值QQ会员 -->
                        <a href="#" onclick="performFunction('rechargeQQVip', '${pageContext.request.contextPath}/rechargeQQVip?id=${user.id}', 0, 10, 0)">
                            <i class="fa-brands fa-qq"></i>
                            <span>充值QQ会员</span>
                            <span class="badge">¥10</span>
                        </a>
                        <!-- 发短信 -->
                        <a href="#" onclick="performFunction('sendSms', '${pageContext.request.contextPath}/sendSms?id=${user.id}', 1, 0, 0)">
                            <i class="fa-solid fa-message"></i>
                            <span>发短信</span>
                            <span class="badge">-1条</span>
                        </a>
                        <!-- 打电话 -->
                        <a href="#" onclick="performFunction('makeCall', '${pageContext.request.contextPath}/makeCall?id=${user.id}', 0, 3, 0)">
                            <i class="fa-solid fa-phone"></i>
                            <span>打电话</span>
                            <span class="badge">¥3</span>
                        </a>
                        <!-- 看视频 -->
                        <a href="#" onclick="performFunction('watchVideo', '${pageContext.request.contextPath}/watchVideo?id=${user.id}', 0, 0, 2)">
                            <i class="fa-solid fa-play-circle"></i>
                            <span>看视频</span>
                            <span class="badge">-2GB</span>
                        </a>
                        <!-- 二级菜单底部信息 -->
                        <div class="sub-menu-footer">
                            <span>当前余额: ¥${user.balance}</span>
                        </div>
                    </div>
                </div>
                <!-- 注销按钮 -->
                <button onclick="if(confirm('你确定要注销？')){ window.location.href='${pageContext.request.contextPath}/deleteMulti1?id=${user.id}'; }" class="action-btn delete">
                    <i class="fa-solid fa-user-slash mr-2"></i>注销
                </button>
                <!-- 退出按钮 -->
                <button onclick="window.location.href='${pageContext.request.contextPath}/index'" class="action-btn logout">
                    <i class="fa-solid fa-sign-out mr-2"></i>退出
                </button>
            </div>

            <!-- 更改套餐的模态框 -->
            <div id="changePackageModal" class="custom-modal">
                <div class="custom-modal-content">
                    <!-- 关闭模态框按钮 -->
                    <span class="custom-close" onclick="hideChangePackageModal()">&times;</span>
                    <!-- 模态框标题 -->
                    <h2 class="text-xl font-bold text-gray-800 mb-4">选择套餐</h2>
                    <!-- 更改套餐表单 -->
                    <form action="${pageContext.request.contextPath}/changePackage" method="post" onsubmit="return checkBalanceBeforeChangePackage();">
                        <input type="hidden" name="id" value="${user.id}">
                        <!-- 套餐选择下拉框 -->
                        <select name="newPackage" class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <option value="1">套餐1: 20条短信, 1GB流量, 200分钟话费, 花费50元</option>
                            <option value="2">套餐2: 0条短信, 10GB流量, 0分钟话费, 花费60元</option>
                            <option value="3">套餐3: 50条短信, 5GB流量, 500分钟话费, 花费150元</option>
                        </select>
                        <!-- 确认更改按钮 -->
                        <div class="mt-4 flex justify-end">
                            <button type="submit" class="action-btn bg-blue-500 hover:bg-blue-600 text-white font-medium">
                                <i class="fa-solid fa-check mr-2"></i>确认更改
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>